<template>
  <div class="min-h-[calc(100vh-120px)]">
    <el-main>
      <div class="max-w-1200px mx-auto px-20px">
        <div class="bread-box flex items-center justify-start mb-10px">
          <div class="line-height-20px">当前位置：</div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{ path: '/supplier' }"
              replace
            >供方市场</el-breadcrumb-item>
            <el-breadcrumb-item>产品详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <el-row
          :gutter="20"
          class="info-row flex"
        >
          <!-- 左侧：产品基本信息 -->
          <el-col :span="14">
            <el-card
              class="info-card rounded-8px h-full flex flex-col"
              shadow="hover"
            >
              <div class="flex items-start justify-between p-10px">
                <img
                  :src="baseUrl+'api/public/file/v1/public/get/'+info.productImg"
                  alt="产品图片"
                  class="w-200px h-200px object-cover"
                >
                <div class="w-full ml-20px text-[#4e5969]">
                  <div class="text-18px font-bold">{{ info.productName }}</div>
                  <div class="my-20px">
                    <el-tag
                      v-for="(value,index) in info.companyTypeList"
                      :key="index"
                      :type="tagType()"
                      class="mr-10px"
                    >
                      {{ value }}
                    </el-tag>
                  </div>
                  <div class="label pl-15px relative line-height-30px">行业：{{ info.productIndustryName }}</div>
                  <div class="label pl-15px relative line-height-30px">分类：{{ info.productTypeName }}</div>
                  <div class="label pl-15px relative line-height-30px">联系电话：{{ info.serviceInfo.companyPhone }}</div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：供应商基本信息 -->
          <el-col :span="10">
            <el-card
              class="info-card rounded-8px h-full flex flex-col"
              shadow="hover"
            >
              <div class="flex flex-col p-10px">
                <div class="w-full flex items-center">
                  <img
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    alt="供应商logo"
                    class="w-50px h-50px"
                  >
                  <div>
                    <p class="ml-10px text-16px font-bold">{{ info.serviceInfo.companyName }}</p>
                    <p class="ml-10px text-[#4e5969]">拥有33个产品</p>
                  </div>
                </div>
                <el-divider></el-divider>
                <div class="w-full">
                  <p>工作时间：</p>
                  <p>周一至周五 08：30：00-18：00：00</p>
                  <p>服务机构地址：</p>
                  <p>{{ info.serviceInfo.companyAddress }}</p>
                  <el-button
                    type="primary"
                    plain
                    class="mt-20px w-full"
                    @click="showCompanyDetail"
                  >机构详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 详情介绍 -->
        <el-card
          class="rounded-8px shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] mt-20px"
          shadow="hover"
        >
          <div class="clearfix relative pl-15px mb-20px">
            <h3 class="m-0 text-[#333]">详情介绍</h3>
          </div>
          <div
            class="line-height-1.8 mb-15px text-justify text-[#333]"
            v-html="info.productComment"
          ></div>
        </el-card>
      </div>
    </el-main>
    <!-- 机构详情对话框 -->
    <el-dialog
      title="机构详情"
      :visible.sync="companyDetailVisible"
      width="600px"
    >
      <el-form
        label-position="right"
        label-width="150px"
      >
        <el-form-item label="企业名称：">
          <span>{{ info.serviceInfo.companyName }}</span>
        </el-form-item>
        <el-form-item label="联系电话：">
          <span>{{ info.serviceInfo.companyPhone }}</span>
        </el-form-item>
        <el-form-item label="工作时间：">
          <span>周一至周五 08：30：00-18：00：00</span>
        </el-form-item>
        <el-form-item label="服务机构地址：">
          <span>{{ info.serviceInfo.companyAddress }}</span>
        </el-form-item>
        <el-form-item label="企业简介：">
          <div v-html="info.serviceInfo.companyIntroduction"></div>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="companyDetailVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRandomTagType } from "@/utils/tool";
import { getProductDetail } from "@/api/home";
export default {
  name: "SupplierMarketDetail",
  data() {
    return {
      info: {},
      baseUrl: process.env.VUE_APP_BASE_API,
      id: "",
      companyDetailVisible:false
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    tagType() {
      return getRandomTagType();
    },
    getData() {
      console.log(this.id);
      getProductDetail({ productId: this.id }).then((res) => {
        this.info = res.data;
      });
    },
    // 显示机构详情
    showCompanyDetail() {
      this.companyDetailVisible = true;
    },
  },
};
</script>

<style scoped>
.bread-box {
  display: flex;
  align-items: center;
  justify-content: start;
}

.el-breadcrumb {
  padding: 15px;
  border-radius: 4px;
}

.info-row {
  display: flex;
}

.info-card ::v-deep .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #0094de;
  border-radius: 50%;
}

.clearfix:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background-color: #596df4;
  border-radius: 2px;
}
</style>